<template>
	<view class="container box">
		<scroll-view class="videos" v-if="sportsVideo.length>0">
			<template v-for="(item,index) in sportsVideo">
				<view class="video-item">
					<uni-icons type="heart-filled" color="red" size="30" class="favBtn"
						@click="favFn(index)"></uni-icons>
					<video :src="item.src" controls></video>
					<view class="video-head">
						<view class="video-name">
							{{item.name}}
						</view>
						<view class="video-desc text-overflow">
							{{item.desc}}
						</view>
					</view>
				</view>
			</template>
		</scroll-view>
		<view class="empty-box" v-else>
			暂无收藏课程
		</view>
	</view>
</template>

<script>
	const db = uniCloud.database()
	import {
		getCourseData,
		check,
		remove,
		addData,
		acquireData
	} from '../../../database/index.js';
	export default {
		data() {
			return {
				sportsVideo: ''
			}
		},
		methods: {
			async favFn(index) {
				let res = await remove('courserCollect', {
					_id: this.sportsVideo[index].id
				})
				if (res) {
					this.$showMsg(`取消收藏`)
					this.sportsVideo.splice(index, 1)
				} else {
					this.$showMsg(`取消收藏失败`)
				}
				this.getData()
				this.$forceUpdate()
			},
			async getData() {
				let collect = db.collection('courserCollect').where({
					course_collector: this.$store.getters.getToken
				}).getTemp()
				let res = await db.collection(collect, 'sportCourse').get()
				this.sportsVideo = []
				let datas = res.result.data
				for (let data of datas) {
					this.sportsVideo.push({
						id: data._id,
						src: data.course_Id[0].course_src,
						name: data.course_Id[0].course_name,
						desc: data.course_Id[0].course_desc
					})
				}


			}
		},
		onLoad() {
			this.getData()
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		display: flex;
	}

	.empty-box {
		letter-spacing: 0.1rem;
		width: 100%;
		text-align: center;
		display: grid;
		color: $global_text;
		height: 100%;
		place-content: center;
	}

	.videos {
		flex: 1;

		.video-item {
			position: relative;
			text-align: center;
			margin-bottom: 20rpx;
			border-bottom: 1px solid rgba(119, 136, 153, .4);
			border-radius: 4rpx;
			padding: 0 20rpx;
			padding-bottom: 5rpx;

			.favBtn {
				z-index: 999;
				position: absolute;
				top: 10rpx;
				right: 30rpx;
			}

			.video-head {
				text-align: left;
				color: black;

				.video-desc {
					color: $global_text;
					font-size: $uni-font-size-text;
					padding: $uni-text-padding;
					padding-left: 0;
					letter-spacing: $uni-text-interval;
				}
			}

			video {
				width: 100%
			}
		}

	}
</style>